<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"  @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" >
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="指标名称">
          <a-input placeholder="请输入指标名称" v-decorator="['indexName' ,validatorRules.indexName]" :disabled="true" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="指标描述">
          <a-input placeholder="请输入指标描述" v-decorator="['indexDescription']" :disabled="disabledForm" />
        </a-form-item>
        <!-- 暂时 -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="指标来源">
          <a-tree-select
           :disabled="disabledForm"
            style="width:100%"
            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
            v-decorator="['indexOrigin', validatorRules.indexOrigin]"
            :treeData="treeData"
             :replaceFields="{
              children: 'children',
              label: 'title',
              value: 'orgCode',
            }"
            placeholder="无">
          </a-tree-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="目录提供方式">
          <j-dict-select-tag :trigger-change="true" v-decorator="['catalogDeliveryMode']" placeholder="请选择目录提供方式" dict-code="catalog_delivery_mode" :disabled="disabledForm" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="提供方式描述">
          <a-input placeholder="请输入提供方式描述" v-decorator="['catalogDeliveryDescribe']" :disabled="disabledForm"  />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="目录更新频率">
          <j-dict-select-tag :trigger-change="true" v-decorator="['catalogUpdateFrequency']" placeholder="请选择目录更新频率" dict-code="data_frequency" :disabled="disabledForm" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="目录更新时间">
          <a-date-picker value-format="YYYY-MM-DD HH:mm:ss" showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-decorator="[ 'catalogDataTime',{}]" :disabled="disabledForm"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据库名称">
          <a-input placeholder="请输入数据库名称" v-decorator="['databaseName', validatorRules.databaseName]" :disabled="true" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据表名称">
          <a-input placeholder="请输入数据表名称" v-decorator="['tableName', validatorRules.tableName]" :disabled="true" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据同步时间">
          <a-date-picker value-format="YYYY-MM-DD HH:mm:ss" showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-decorator="[ 'dataSyncTime',{}]" :disabled="disabledForm"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据更新频率">
          <j-dict-select-tag :trigger-change="true" v-decorator="['dataSyncFrequency']" placeholder="请选择数据更新频率" dict-code="data_frequency" :disabled="disabledForm" />
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { httpAction, getAction, postParamAction } from '@/api/manage'
import { queryDepartTreeList } from '@/api/api'
export default {
  name: 'SelectScSituationIndexInfoModalNew',
  components: {},
  data() {
    return {
      disabledForm: false,
      treeData: [],
      catalogId: null,
      servUrl: null,
      apiList: [],
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        indexName: { rules: [{ required: true, message: '请输入指标名称!' }] },
        indexOrigin: { rules: [{ required: true, message: '请选择指标来源!' }] },
        databaseName: { rules: [{ required: true, message: '请输入数据库名称!' }] },
        tableName: { rules: [{ required: true, message: '请输入数据表名称!' }] }

      }
    }
  },
  created() {
  },
  methods: {
    loadTree() {
      var that = this
      that.treeData = []
      queryDepartTreeList().then((res) => {
        if (res.success) {
          // 部门全选后，再添加部门，选中数量增多
          for (let i = 0; i < res.result.length; i++) {
            console.log(res.result[i])
            const temp = res.result[i]
            that.treeData.push(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
      })
    },
    changeServ() {

    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    add(catalogId) {
      this.disabledForm = false
      this.title = '新增'
      this.edit({ catalogId: catalogId })
    },
    view(record) {
      this.loadTree()
      this.disabledForm = true
      this.catalogId = record.catalogId
      this.title = '详情'
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.databaseType = this.model.dbType
        this.form.setFieldsValue(pick(this.model, 'indexName', 'indexDescription', 'indexOrigin', 'catalogDeliveryMode', 'catalogDeliveryDescribe', 'catalogUpdateFrequency', 'catalogDataTime', 'databaseName', 'tableName', 'dataSyncTime', 'dataSyncFrequency'))
      })
    },
    edit(record) {
      this.disabledForm = false
      this.title = '编辑'
      this.loadTree()
      this.catalogId = record.catalogId
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.databaseType = this.model.dbType
        this.form.setFieldsValue(pick(this.model, 'indexName', 'indexDescription', 'indexOrigin', 'catalogDeliveryMode', 'catalogDeliveryDescribe', 'catalogUpdateFrequency', 'catalogDataTime', 'databaseName', 'tableName', 'dataSyncTime', 'dataSyncFrequency'))
      })
    },
    close() {
      this.form.resetFields()
      this.servUrl = null
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const formData = Object.assign(this.model, values)
          if (formData.id) {
            httpAction('/index/scSituationIndexDetail/edit', formData, 'PUT').then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.close()
              } else {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            postParamAction('/index/scSituationIndexDetail/add', { catalogId: this.catalogId }, formData).then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.close()
              } else {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.confirmLoading = false
            })
          }
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.atn-testbtn {
    color: #2F77F2 !important;
    background: #FFFFFF !important;
    box-shadow: 0px 1px 3px 0px rgba(4, 0, 0, 0.08) !important;
    border: 1px solid #2F77F2 !important;
    border-radius: 2px !important;
    padding: 0 10px !important;
    height: 34px !important;
    margin: 0 8px 8px 0;
}
</style>
